<template>
    <div class="login">
        <!-- 头部导航栏 -->
        <header>
            <van-nav-bar :title="isTitle ? '登录' : '注册'" left-arrow @click-left="onClickLeft">
                <template #right>
                    <van-icon name="ellipsis" size="18" />
                </template>
            </van-nav-bar>
        </header>
        <!-- logo 图片 -->
        <img src="../../assets/logo.png" width="100px" class="logo" alt="">

        <!-- 登录表单 -->
        <div class="login-form">
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="用户名" label="用户名" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <!-- 验证码 -->
                <Verify ref="veri" :type="2" @error="alertFn(2)" @success="alertFn(1)" :showButton="false"></Verify>
                <div style="margin: 16px;">
                    <!-- 文本提示 -->
                    <p class="link-register" @click="isTitle = !isTitle">{{ isTitle ? '立即注册' : '已有账号，立即登录' }}</p>
                    <van-button round block type="info" native-type="submit">{{ isTitle ? '登录' : '注册' }}</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import Verify from 'vue2-verify'
import { Notify } from "vant";
import { register, login } from "../../api/index.js"
export default {
    name: "Login",
    components: { Verify },
    data() {
        return {
            username: "17001100444", // 用户名
            password: "123456", // 密码
            isTitle: true, // 控制登录与注册切换的
            flag: false, // 记录验证码是否通过，flag是true表示验证通过，否则表示没有通过
        };
    },
    mounted (){
localStorage.removeItem('xftoken')
    },
    watch: {
        isTitle() {
            this.username = "";
            this.password = "";
            this.$refs.veri.refresh();
        }
    },
    methods: {
        // 点击登录或注册
        onSubmit() {
            // 调用接口之前，先验证验证码是否正确
            this.$refs.veri.checkCode();

            if (this.flag) {
                // 表示验证码通过
                if (this.isTitle) {
                    // 登录
                    login(this.username, this.password).then(data => {
                        if (data.resultCode == 200) {
                            // 登录成功
                            localStorage.setItem("xftoken", data.data)
                            if (this.$route.query.needback == 1) {
                                this.$router.back();
                            } else {
                                this.$router.replace("/home");
                            }
                            Notify({ type: 'success', message: "登录成功" });
                        }
                    })
                } else {
                    // 注册
                    register(this.username, this.password).then(data => {
                        if (data.resultCode == 200) {
                            Notify({ type: 'success', message: "注册成功" });
                            this.isTitle = true; // 注册成功后进行登录
                        }
                    })
                }
                this.$refs.veri.refresh(); // 刷新验证码
            } else {
                // 表示验证码没有通过
                this.$toast("验证码错误")
                this.$refs.veri.refresh(); // 刷新验证码
            }

            // console.log("666");
        },
        // 验证码成功或失败
        alertFn(num) {
            // console.log("--->", num);
            this.flag = num == 1 ? true : false;
        },
        // 点击头部的左箭头
        onClickLeft() {
            this.$router.push("/home")
        }
    }
};
</script>

<style scoped lang="less">
.login {
    height: 100%;

    header {
        width: 100%;
        padding: 0 0.26667rem;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 0.02667rem solid #dcdcdc;
    }

    .logo {
        width: 3.2rem;
        height: 3.2rem;
        display: block;
        margin: 36px auto 0;
    }

    .login-form {
        padding: 0 0.53333rem;

        .van-form {
            display: block;
        }

        /deep/.cerify-code-panel {
            display: flex;
            margin-top: 0.42667rem;
            height: 100%;
            overflow: hidden;

            .verify-code {
                width: 40% !important;
                height: 40px !important;
                line-height: 40px !important;
                font-size: 16px !important;
            }

            .verify-code-area {
                width: 54%;
                margin-left: 0.37333rem;

                .verify-input-area .varify-input-code {
                    width: 2.4rem;
                    height: 1.01333rem;
                    border: 0.02667rem solid #e9e9e9;
                    padding-left: 0.26667rem;
                    font-size: 0.42667rem;
                }

                .verify-change-area {
                    line-height: 1.17333rem;
                    font-size: 12px;
                }
            }
        }
    }

    .link-register {
        font-size: 0.37333rem;
        margin-bottom: 0.53333rem;
        color: #1989fa;
        display: inline-block;
    }

    .van-button--round {
        background: rgb(27, 174, 174) !important;
        border-color: rgb(27, 174, 174) !important;
    }
}
</style>